<template>
  <div>
    <el-form :model="queryParam" :inline=true style="display: flex">
      <el-form-item label="idcard">
        <el-input v-model="queryParam.idCardNo" style="width:160px"/>
      </el-form-item>
      <el-form-item label="名字">
        <el-input v-model="queryParam.userName" style="width:160px"/>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="queryParam.phoneNo" style="width:160px"/>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="queryParam.idCardAddress" style="width:160px"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryPage">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column label="会话" width="230">
        <template slot-scope="scope">
          <div class="typeEnter">序号：{{ scope.row.id }}</div>
          <div class="typeEnter">用户id：{{ scope.row.userId }}</div>
          <div class="typeEnter">创建时间：{{ parseTime(scope.row.createTime) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="用户信息" width="220">
        <template slot-scope="scope">
          <div class="typeEnter">名字：{{ scope.row.userName }}</div>
          <div class="typeEnter">手机号：{{ scope.row.phoneNo }}</div>
          <div class="typeEnter">idcard：{{ scope.row.idCardNo }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="userStatus" label="状态" width="60">
        <template slot-scope="scope">
          <span>{{ value2Name(validStatus, scope.row.userStatus) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="idCardAddress" label="地址" width="160"/>
      <el-table-column prop="userBindCards" label="持卡信息" width="220">
        <template slot-scope="scope">
          <span v-for="(item,index) in scope.row.userBindCards">{{ item.holderCardName + '=' + item.bankCardNo }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="userFiles" label="文件信息" width="600">
        <template slot-scope="scope">
          <span v-for="(item,index) in scope.row.userFiles">
            <el-link :href="rootUrl.ossUrl + item.fileUrl" target="_blank">
              {{ item.fileType + '=' + item.fileUrl }}
            </el-link>
          </span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="pageTotal>0"
      :total="pageTotal"
      :page.sync="queryParam.pageNum"
      :limit.sync="queryParam.pageSize"
      @pagination="queryPage"
    />
  </div>
</template>

<script>

import {parseTime, value2Name} from "../../../utils";
import store from "../../../store";
import rootUrl from "../../../config/rootUrl";

export default {
  computed: {
    rootUrl() {
      return rootUrl
    }
  },
  data() {
    return {
      // 查询参数
      pageTotal: 0,
      queryParam: {
        idCardNo: '',
        userName: '',
        phoneNo: '',
        idCardAddress: '',
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      validStatus: store.listDictionary('isValid')
    }
  },
  mounted() {
    this.pageList()
  },
  methods: {
    value2Name,
    parseTime,
    queryPage() {
      var _this = this
      _this.pageList()
    },
    pageList() {
      var _this = this
      this.$api.userinfoPageList(_this.queryParam).then(res => {
        if (res.code === '00000') {
          _this.tableData = res.data.pageList
          _this.pageTotal = res.data.pageTotal
        } else {
          _this.$message(res.msg)
        }
      }).catch(e => {
        console.log('接口访问异常!')
      })
    }
  }
}
</script>
